<template>
  <view class="video-container">
    <view class="top">
      <view class="cover-img">
        <image class="banner-img" :src="videoInfo.images"></image>
      </view>
      <view class="video-info">
        <view class="video-name">{{videoInfo.name}}</view>
        <view class="video-type info-tip">{{videoInfo.video_category.nickname}}</view>
        <view class="video-time info-tip">上映时间:{{videoInfo.home_create_time}}</view>
        <view class="video-director info-tip">导演:{{videoInfo.author}}</view>
        <view class="btn-row">
          <view class="collect-btn" @click="collectVideo">
            <u-icon size="40rpx" class="collect-icon" v-if="!videoInfo.is_collection" name="star" />
            <u-icon size="40rpx" color="#f8a137" class="collect-icon-active" v-else name="star-fill" />
            <text class="text">{{videoInfo.is_collection ? '已收藏' : '收藏'}}</text>
          </view>
          <button class="share-btn" open-type="share">
            <u-icon size="40rpx" name="share" />
            <text class="text">分享</text>
          </button>
        </view>
      </view>
    </view>
    <view class="middle">
      <!-- 视频简介 -->
      <view class="desc-box">
        <view class="section-row">
          <i class="iconfont icon-jianjie"></i>
          <text class="section-title">视频简介</text>
        </view>
        <view class="desc">
          <u-read-more ref="uReadMore" :shadowStyle="shadowStyle" showHeight="60" :color="'#fff'" :toggle="moreToggle">
            <view class="content">
              <u-parse :content="videoInfo.content" @load="load"></u-parse>
            </view>
          </u-read-more>
        </view>
      </view>
      <!-- 视频链接 -->
      <view class="link-box">
        <view class="section-row">
          <i class="iconfont icon-link"></i>
          <text class="section-title">视频链接</text>
        </view>
        <view class="link-content">
          <view class="link-bg">
            <view class="link-text">看视频请:</view>
            <button class="link-btn" @click="copyVideoPath" hover-class="link-btn-hover">
              <i class="iconfont icon-fuzhi"></i>
              <text class="link-tit">复制链接</text>
            </button>
          </view>
          <view class="link-notice notice-bg">
            <i class="iconfont icon-notice"></i>
            <view class="notice-content">请授权登录后复制视频链接到浏览器播放！</view>
          </view>
        </view>
      </view>
      <!-- 推荐视频 -->
      <view class="recommend-box">
        <view class="section-row">
          <i class="iconfont icon-wodetuijian"></i>
          <text class="section-title">推荐视频</text>
        </view>
        <view class="video-box">
          <VideoList :jumpType="'redirectTo'" :videoList="recommendList" />
        </view>
      </view>
    </view>
    
    <LoginDialog/>
  </view>
</template>

<script>
import * as api from '@/api/api';
import VideoList from '@/components/video-list/video-list';
import {mapState} from 'vuex';
export default {
  name: "video",
  components: {
    VideoList
  },
  data() {
    return {
      videoId: null,
      videoInfo: {},
      moreToggle: true,
      shadowStyle: {
        color: '#fff',
        backgroundImage: "none",
        paddingTop: "0",
        marginTop: "20rpx"
      },
      recommendList: [] // 推荐视频
    };
  },
  onLoad(e) {
    this.videoId = e.id || null;
    if (this.videoId) {
      this.getVideoDetailById();
    }
    this.getRecommendList();
  },
  created() {},
  mounted() {
    uni.setStorageSync('age', 20)
  },
  methods: {
    // 视频详情
    async getVideoDetailById() {
      const {data: res} = await api.getVideoDetail(this.videoId);
      if (res.code === 1) {
        this.videoInfo = res.data;
        this._saveVideoToStorage();
        uni.setNavigationBarTitle({
          title: res.data.name
        });
      }
    },
    load() {
      this.$refs.uReadMore.init();
    },
    // 复制链接
    copyVideoPath() {
      if (!this.isLogin || !this.userInfo) {
        this.$store.commit('showLoginDialog');
        return;
      }
      let href = this.videoInfo.file;
      uni.setClipboardData({
        data: href,
        success: res => {
          uni.showToast({title: '复制成功', icon: 'none'});
        }
      })
    },
    // 收藏电影
    collectVideo() {
      if (!this.isLogin || !this.userInfo) {
        this.$store.commit('showLoginDialog');
        return;
      }
      // 收藏 1是  否2
      const collectStatus = this.videoInfo.is_collection ? 2 : 1;
      this._collectVideo(collectStatus);
    },
    // 推荐视频
    async getRecommendList() {
      const {data: res} = await api.getRecommendList();
      if (res.code === 1) {
        const recommendList = res.data.slice(0, 6);
        this.recommendList = recommendList;
      }
    },
    // 收藏请求
    async _collectVideo(collectStatus) {
      const res = await api.userCollect({
        video_id: this.videoId,
        type: collectStatus
      });
      if (res.data.code === 1) {
        this.videoInfo.is_collection = !this.videoInfo.is_collection;
        if (this.videoInfo.is_collection) {
          uni.showToast({title: '收藏成功', icon: 'none'});
        } else {
          uni.showToast({title: '已取消', icon: 'none'});
        }
      }
    },
    // 存储视频到缓存
    _saveVideoToStorage() {
      let videoHistory = uni.getStorageSync('video_history');
      if (!videoHistory) {
        videoHistory = [];
      }
      let findIndex = videoHistory.findIndex(item => {
        return item.id === this.videoInfo.id;
      })
      if (findIndex === -1) {
        videoHistory.unshift(this.videoInfo);
        uni.setStorageSync('video_history', videoHistory);
      }
    }
  },
  computed: {
    ...mapState(['isLogin', 'userInfo', 'token'])
  }
};
</script>
<style lang="scss" scoped>
  .video-container {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(#84878e, #645558);
    display: flex;
    flex-direction: column;
    align-items: center;
    .top {
      width: 690rpx;
      display: flex;
      padding-top: 30rpx;
      .cover-img {
        width: 200rpx;
        height: 260rpx;
        .banner-img {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
      .video-info {
        flex: 1;
        margin-left: 30rpx;
        color: #fff;
        .video-name {
          font-size: 32rpx;
          letter-spacing: 4rpx;
        }
        .info-tip {
          color: #dfe0e1;
          font-size: 24rpx;
          margin-top: 10rpx;
          letter-spacing: 4rpx;
        }
      }
      .btn-row {
        display: flex;
        margin-top: 15rpx;
        .collect-btn, .share-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 4rpx 30rpx;
          background-color: #fff;
          border-radius: 8rpx;
          .text {
            font-size: 26rpx;
            color: #333;
          }
        }
        .collect-btn {
          width: 150rpx;
          padding: 4rpx 0;
        }
        .share-btn {
          margin-left: 30rpx;
          border: none;
        }
        .share-btn::after {
          border: none;
        }
      }
    }
    .middle {
      width: 690rpx;
      margin-top: 60rpx;
      color: #fff;
      .desc-box {
        .desc {
          .content {
            color: #fff;
            font-size: 26rpx;
            margin-top: 30rpx;
          }
        }
      }
      .link-box {
        margin-top: 60rpx;
      }
      .recommend-box {
        margin-top: 60rpx;
        .video-box {
          margin-top: 30rpx;
        }
      }
    }
    .section-row {
      display: flex;
      align-items: center;
      .section-title {
        font-size: 32rpx;
        margin-left: 8rpx;
      }
    }
    .link-bg {
      width: 100%;
      min-height: 120rpx;
      background-color: #4e4a4b;
      border-radius: 10rpx;
      margin-top: 30rpx;
      padding: 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .link-text {
        font-size: 26rpx;
      }
      .link-btn {
        margin: 0;
        background-color: #fff;
        height: 70rpx;
        padding: 0 20rpx;
        line-height: 70rpx;
        text-align: center;
        margin-left: 20rpx;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        .icon-fuzhi {
          color: #f8a137;
        }
        .link-tit {
          color: #686a69;
          font-size: 26rpx;
          margin-left: 10rpx;
        }
      }
      .link-btn-hover {
        background-color: #ece7e7;
        color: #fff;
      }
    }
    .notice-bg {
      width: 100%;
      min-height: 120rpx;
      background-color: #fff;
      border-radius: 10rpx;
      margin-top: 30rpx;
      padding: 10rpx;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      .icon-notice {
        color: #f8a137;
      }
      .notice-content {
        flex: 1;
        color: #686a69;
        font-size: 28rpx;
        letter-spacing: 4rpx;
        margin-left: 10rpx;
      }
    }
    
  }
</style>